<template>
	<view class="down-box">
	<u-count-down
			:time="time"
			format="DD:HH:mm:ss"
			autoStart
			millisecond
			@change="onTimeChange"
		>
			<view class="time-box">
				<text class="label">限时秒杀</text>
				<text class="time__item">{{ timeData.days }}</text>天
				<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>时
				<text class="time__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>分
				<text class="time__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>秒
			</view>
		</u-count-down>
		<u-icon name="more-dot-fill" color="#333333" size="50"></u-icon>
	</view>
</template>

<script>
	export default {
		props: {
			time: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				timeData: {}
			}
		},
		methods: {
			onTimeChange(e) {
				this.timeData = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.down-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.time-box {
			.label {
				font-size: 32rpx;
				color: #333333;
				margin-right: 40rpx;
			}
			.time__item {
				background-color: rgba(0, 0, 0, .7);
				color: #ffffff;
				font-size: 28rpx;
				display: inline-block;
				padding: 6rpx;
				border-radius: 6rpx;
				min-width: 36rpx;
				text-align: center;
				margin: 0 8rpx;
			}
		}
	}
</style>